import React, { useState } from 'react';
import { Modal, Form, Input, Button, Select, DatePicker, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios';

const Layout = () => {
    const [form] = Form.useForm();
    const { RangePicker } = DatePicker;
    const { TextArea } = Input;
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [formData, setFormData] = useState([]);
    const selectList = [{ value: 0, label: "小宫" }, { value: 1, label: "小宏" }];
    const [fileList, setFileList] = useState([]);

    // 更新上传列表
    const handleUpload = info => {
        setFileList(info.fileList);
    };

    // 确认提交表单
    const handleOk = () => {
        form.submit();
        setIsModalOpen(false);
    };

    // 处理数据并存储表单数据
    const onFinish = values => {
        const updatedValues = { ...values, files: { fileList: fileList.map(file => ({ ...file, status: 'done' })) } };
        console.log(updatedValues);
        setFormData([...formData, updatedValues]);
    };

    // 自定义上传请求
    const customUpload = async options => {
        const { file, onSuccess, onError, onProgress } = options;
        const formData = new FormData();
        formData.append('file', file);

        try {
            const response = await axios.post('/api/upload', formData, {
                onUploadProgress: event => {
                    const percent = Math.round((event.loaded * 100) / event.total);
                    onProgress({ percent });
                }
            });

            onSuccess(response.data);
        } catch (error) {
            onError(error);
            message.error('上传失败');
        }
    };

    // 点击按钮打开模态框并设置表单值
    const openModalWithValues = index => {
        form.setFieldsValue(formData[index]);
        setFileList(formData[index]?.files?.fileList || []);
        setIsModalOpen(true);
    };

    return (
        <div>
            <Button type="primary" onClick={() => openModalWithValues(0)}>模版1</Button>
            <br /><br />
            <Button type="primary" onClick={() => openModalWithValues(1)}>模版2</Button>
            <Modal
                forceRender
                centered
                width={800}
                title='标题'
                open={isModalOpen}
                onOk={handleOk}
                onCancel={() => setIsModalOpen(false)}
                maskClosable={false}
            >
                <Form
                    form={form}
                    labelCol={{ flex: "110px" }}
                    labelAlign="left"
                    labelWrap
                    style={{ maxWidth: 750 }}
                    onFinish={onFinish}
                >
                    <Form.Item label="文本框" name='input'>
                        <Input />
                    </Form.Item>
                    <Form.Item label="选择器" name='select'>
                        <Select options={selectList}></Select>
                    </Form.Item>
                    <Form.Item label="时间选择器" name='rangePicker'>
                        <RangePicker />
                    </Form.Item>
                    <Form.Item label="文本域" name='textArea'>
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item label="文件上传" name='files'>
                        <Upload
                            customRequest={customUpload}
                            onChange={handleUpload}
                            fileList={fileList}
                        >
                            <Button icon={<UploadOutlined />}>文件上传</Button>
                        </Upload>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default Layout;
